<template>
  <div class="info">
       <div class="activeMask" @click="hideActiveMask"></div>
       <!-- <div style="postion:relative"> -->
       <!-- </div> -->
      <div class="head" v-for="(items,i) in info" :key="'n'+i">
        <header>
            <div class="bg_img">
                <img src="https://fuss10.elemecdn.com/e/67/4cb5d6183f486c66fc2920ba14ad8png.png" alt="">
            </div>
            <span class="glyphicon glyphicon-menu-left left" @click="goBack"></span>
            <div class="mask"></div>
            <div class="img_box">
                <img :src="items.image_path" alt="">
            </div>
        </header>
        <div class="contentA">
            <div class="contentA_1">
                <!-- {{info.restaurant.name}} -->
                <div style="text-align:center"><span class="title_text">{{items.name}}</span>
                <span class="glyphicon glyphicon-triangle-right" style="color:#555;font-size:.5rem "></span></div>
                <!--   {{info.restaurant.order_lead_time}}-->
                <span class="s1" style="margin-left: 1rem">评价{{items.rating}}&nbsp;</span>
                <span class="s1">月售单 {{items.rating_count}} &nbsp;</span>
                <span class="s1">商家配送约 {{items.order_lead_time}}分钟</span> 
            </div>
            <div class="contentA_2">
                <div class="manjian">
                    <span class="s1" style="background:rgb(235, 125, 125);;color:white">满减</span>
                    <span class="s1" style="color:#333"> {{items.activities[0].description}}</span>
                    <span class="s1 right" @click="activeShow">{{items.activities.length}}个优惠
                        <span class="glyphicon glyphicon-triangle-bottom" style="font-size:0.3rem">  
                        </span>
                    </span>
                </div>
                <p class="s1 gonggao" v-if="items.promotion_info">公告:{{items.promotion_info}}</p>               
            </div>

             <div class="activeFix">
                <div class="fixtop">
                    <div class="youhui_title">优惠活动
                        <span @click="hideActiveMask">X</span>
                    </div>
                </div>
                <div class="youhui">
                    <div class="youhui_con">
                        <p v-for="(actives,n) in items.activities" :key="n">
                            <span class="span_text">{{actives.icon_name}}</span>
                            <span>{{actives.description}}</span>
                        </p>
                    </div>
                </div>
            </div>
       </div>


     </div>
     <!-- 活动弹出层 -->
      <!-- 点餐 评价 商家 -->
    <div class="contentB">
        <!-- 头部 -->
        <div class="conB_tab">
            <sticky  :check-sticky-support="true" >
                <tab :line-width=2 active-color='rgb(30, 164, 253)' custom-bar-width="30px" style="font-weight:500;z-index:1000" v-model="index">
                <tab-item class="vux-center a_tab" @click="shownav">点餐</tab-item>
                <tab-item class="vux-center a_tab">评价</tab-item>
                <tab-item class="vux-center a_tab">商家</tab-item> 
            </tab>
            </sticky>
        </div>
        <!-- 内容区 -->
        <div class="conB_1">
            <div id="dc" class="con_dpj">
                <div class="dc_title">商家推荐</div>
                    <!-- 商家推荐 -->
                <div class="dc_con1">
                    <!-- <swiper  height=" 7.5rem" :show-dots="true" dots-position="center">
                        <swiper-item>
                            <div class="cd_con1_1">
                                <ul>
                                    <li>
                                        <img src="https://fuss10.elemecdn.com/f/d7/c53e80a7e4fed3c31ecd93a9bd26ajpeg.jpeg?imageMogr/thumbnail/240x/" alt="">
                                        <p class="p_text1">香辣鸡腿堡+辣翅辣翅</p>
                                        <p class="p_text2 s1">月售154&nbsp;好评率81%</p>
                                        <p class="p_text3">
                                            <span style="color:red;font-size: .75rem">￥14</span>
                                            <span class="glyphicon glyphicon-plus-sign right"></span>
                                        </p>
                                    </li>
                                        <li>
                                        <img src="https://fuss10.elemecdn.com/f/d7/c53e80a7e4fed3c31ecd93a9bd26ajpeg.jpeg?imageMogr/thumbnail/240x/" alt="">
                                        <p class="p_text1">香辣鸡腿堡+辣翅辣翅</p>
                                        <p class="p_text2 s1">月售154&nbsp;好评率81%</p>
                                        <p class="p_text3">
                                            <span style="color:red;font-size: .75rem">￥14</span>
                                            <span class="glyphicon glyphicon-plus-sign right"></span>
                                        </p>
                                    </li>
                                        <li>
                                        <img src="https://fuss10.elemecdn.com/f/d7/c53e80a7e4fed3c31ecd93a9bd26ajpeg.jpeg?imageMogr/thumbnail/240x/" alt="">
                                        <p class="p_text1">香辣鸡腿堡+辣翅辣翅</p>
                                        <p class="p_text2 s1">月售154&nbsp;好评率81%</p>
                                        <p class="p_text3">
                                            <span style="color:red;font-size: .75rem">￥14</span>
                                            <span class="glyphicon glyphicon-plus-sign right"></span>
                                        </p>
                                    </li>
                                    
                                </ul>
                            </div>
                        </swiper-item>
                        <swiper-item>
                                <div class="cd_con1_1">
                                <ul>
                                    <li>
                                        <img src="https://fuss10.elemecdn.com/f/d7/c53e80a7e4fed3c31ecd93a9bd26ajpeg.jpeg?imageMogr/thumbnail/240x/" alt="">
                                        <p class="p_text1">香辣鸡腿堡+辣翅辣翅</p>
                                        <p class="p_text2 s1">月售154&nbsp;好评率81%</p>
                                        <p class="p_text3">
                                            <span style="color:red;font-size: .75rem">￥14</span>
                                            <span class="glyphicon glyphicon-plus-sign right"></span>
                                        </p>
                                    </li>
                                    
                                </ul>
                            </div> 
                        </swiper-item>
                    </swiper> -->
                    <div class="cd_con1_1">
                        <ul>
                            <li v-for="n in 5" :key="n">
                                <img src="https://fuss10.elemecdn.com/f/d7/c53e80a7e4fed3c31ecd93a9bd26ajpeg.jpeg" alt="">
                                <p class="p_text1">香辣鸡腿堡+辣翅辣翅</p>
                                <p class="p_text2 s1">月售154&nbsp;好评率81%</p>
                                <p class="p_text3">
                                    <span style="color:red;font-size: .75rem">￥14</span>
                                    <span class="jia right">+</span>
                                </p>
                            </li>
                        </ul>
                      
                    </div>

                </div>
                <div class="dc_con2">
                        <!-- 订餐左边列表 -->
                    <div class="libox">
                        <div class="dc_con2_left" id="left_List">
                            <nav id="mynav">
                                <ul class="nav list-unstyled text-center" style="padding-bottom:3.125rem">                       
                                    <li v-for="(list,m) in listInfos" :key="m+'m'" >
                                       <a :href="'#'+list.id"  class="active">
                                            <img :src="list.icon_url" alt="" v-if="list.icon_url!=''">
                                            <span>{{list.name}}</span>
                                       </a>
                                    </li> 
                                </ul>
                            </nav>
                        </div>
                    </div> 
  
                    <!-- 点餐右边内容 -->
                    <div class="dc_con2_right" >    
                        <div class="dc_con2_1"  v-for="(listright,i) in listInfos" :key="i"
                         data-spy="scroll" data-target="#mynav" data-offset="0" 
                          style="position:relative;overflow-y:scroll;" >
                            <p class="list_title" style=""  :id="listright.id" >
                                <span style="color:#666;font-weight:600" >{{listright.name}}</span>
                                <span class="s1">{{listright.description}}</span>
                            </p>
                            <div class="dc_con2_11" v-for="(foods,s) in listright.foods" :key="s">
                                <div class="imgleft">
                                    <img :src="foods.image_path" alt="">
                                </div>
                                <div class="contright">
                                    <p style="font-weight:600">{{foods.name}}</p>
                                    <p class="s3">{{foods.description}}</p>
                                    <p class="s3">月售{{foods.month_sales}}份 &nbsp;好评率{{foods.satisfy_rate}}%</p>
                                    <span class="s3" style="border: .03125rem solid rgb(235, 235, 235);color:red;margin:.1875rem" 
                                    v-if="foods.specfoods[0].original_price!=null">
                                    {{(foods.specfoods[0].price/foods.specfoods[0].original_price*10).toFixed(1)}}折</span>
                                    <span class="s3" style="margin:.1875rem" v-else></span> 
                                    <p style="position:relative;width:100%">
                                    <span>
                                        <span style="color:red;font-size: .75rem">￥{{foods.specfoods[0].price}}</span>
                                    <del style="color:#777;font-size: .5625rem" v-if="foods.specfoods[0].original_price!=null">￥{{foods.specfoods[0].original_price}}</del>
                                    </span>
                                    <span class="right">
                                        <span class="jian" @click="reduce(i,s,$event)">-</span>
                                        <span class="count">&nbsp;{{foods.count}}&nbsp;</span>
                                        <span class="jia" @click="add(i,s,$event)">+</span>
                                    </span> 
                                    </p>
                                </div>
                            </div>
                        </div>
                    
                   </div>

                </div>
                <footer>
                    <div class="footer_con1">
                        <div class="footer_left">
                            <div class="car">
                                <div style="position:relative">
                                    <span class="red_count" v-if="total>0">{{total}}</span>
                                </div>
                            </div>
                             <div class="total">
                                 <p>
                                     <span>￥{{money}}</span>
                                     <del class="text">￥40.8</del>
                                 </p>
                                 <p class="text">另需配送费2.6元</p>
                                </div>
                        </div>
                        <div class="footer_right">去结算</div>
                    </div>
                </footer>
                <div class="carMask"></div>

                <div style="height:200px"></div>
            </div>

            <div id="pj" class="con_dpj">
                <!-- 评分 -->
                <div class="pj_pf">
                    <div class="con1">
                       <ul v-for="(foodscore,index) in foodscore" :key="index">
                           <li>
                                <p class="p_text">{{foodscore.rider_score.toFixed(1)}}</p>
                           </li>
                           <li>
                               <div class="div_mar">
                                   <p  class="p_text1">商家评分</p>
                                    <p class="icon_span">
                                        <span class="glyphicon glyphicon-star"></span>
                                        <span class="glyphicon glyphicon-star"></span>
                                        <span class="glyphicon glyphicon-star"></span>
                                        <span class="glyphicon glyphicon-star"></span>
                                        <span class="glyphicon glyphicon-star"></span>
                                    </p>
                               </div>
                           </li>
                           <li>
                                <div class="div_mar">
                                   <p  class="p_text1">味道</p>
                                    <p class="p_text2">{{foodscore.taste_score.toFixed(1)}}</p>    
                               </div>
                           </li>
                           <li>
                               <div class="div_mar">
                                   <p  class="p_text1">包装</p>
                                    <p class="p_text2">{{foodscore.package_score.toFixed(1)}}</p>    
                               </div>
                           </li>
                           <li>
                               <div class="div_mar">
                                   <p  class="p_text1">配送</p>
                                    <p class="p_text2">{{foodscore.shop_score.toFixed(1)}}</p>    
                               </div>
                           </li>
                       </ul>

                    </div>
                </div>
                <!-- 评论 -->

                <div style=" border-top: .5rem /* 8/16 */ solid rgb(235, 235, 235);"></div>
                <section>
                    <div class="con2">
                        <ul>
                            <span v-for="(tags,i) in tagsCount" :key="i" v-if="i==0">
                                  <li class="li_style oneli">{{tags.name}}&nbsp;{{tags.count}}</li>
                            </span>
                            <span v-else-if="tags.unsatisfied==false">
                                <li class="li_style">{{tags.name}}&nbsp;{{tags.count}}</li>
                            </span>
                            <span v-else>
                                <li class="li_style tagColor">{{tags.name}}&nbsp;{{tags.count}}</li>
                            </span>
                           
                        </ul>
                     
                    </div>
                    <div class="con2">
                         <span class="dagou">√</span>
                        <span style="font-size:.625rem;color:rgb(112, 112, 112);">只看到有内容的评价</span>      
                    </div>
                    <!-- 评价内容区域 -->

                    <div class="con3" v-for="(user,index) in pingjia" :key="index">
                        
                        <div class="pj_photoBox">
                            <div></div>
                            
                        </div>
                        <div class="pj_con">
                           <div class="username">
                               <span>{{user.username}}</span>
                               <span class="date">{{user.rated_at}}</span>
                            </div>
                             <p class="icon_span">
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span style="color:orange;font-size:  .53125rem ">满意</span>
                            </p>
                            <p>{{user.rating_text}}</p>
                            <p class="answer" v-if="user.reply">
                                {{user.reply.content}}
                            </p>

                            <div class="pj_img" v-if="user.order_images">
                                <img :src="user.order_images[0].image_hash" alt="">
                            </div>
                            <div class="dianzan">
                                <span class="zan">
                                    <img src="../../../static/icon/zan.png" alt="" style="width:.875rem">
                                </span>
                                <span class="span_zan">蜜汁手巴基</span>
                                <span class="span_zan">脆皮全集鸡</span>
                                <span class="span_zan">着香带骨鸡排</span>
                            </div>
                        </div>

                   
                </div>


                </section>
                 <div style="height:200px"></div>
        
            </div>
           
            <div id="sj" class="con_dpj">
                <div class="sj_con1" v-for="(onfo,index) in userSjInfo" :key="index">
                   
                    <div style="padding:0 .3125rem"> 
                       <img :src="onfo.brand_intros[0].image_hash" alt="" v-if="onfo.brand_intros.length>0">
                    </div>
                    <p class="miaosu">{{onfo.title}}</p>
                    <p class="info" v-if="onfo.brand_intros.length>0">
                     {{onfo.brand_intros[0].brief}}
                    </p>
                    <p class="chakan">查看品牌故事</p>
                   
                </div>

                <div style=" border-top: .5rem /* 8/16 */ solid rgb(235, 235, 235);"></div>
           
                <div class="allbox" v-for="(v1,i1) in info" :key="i1+'c'">
                <div class="sj_con2">
                    <p class="peisong">配送信息</p>
                    <p class="peisongInfo">由商家配送提供配送，
                        约{{v1.order_lead_time}} 分钟，距离{{(v1.distance/1000).toFixed(1)}}km</p>
                    <p class="peisongInfo">{{v1.piecewise_agent_fee.description}}</p>
                </div>
                <div style=" border-top: .5rem /* 8/16 */ solid rgb(235, 235, 235);"></div>
                <div class="sj_con3">
                    <p class="actives">活动与服务</p>
                    <p v-for="(v2,i2) in v1.activities" :key="i2" class="p_style">
                        <span>{{v2.icon_name}}价</span>
                        <span>{{v2.description}}</span>
                    </p>
                </div>
                <div style=" border-top: .5rem /* 8/16 */ solid rgb(235, 235, 235);"></div>
                <div class="sj_con4">
                    <p class="actives">商家实景</p>
                    <div class="shijing">
                       <img src="https://fuss10.elemecdn.com/0/f6/e5273e3ae871dc57e23bf5c35417fjpeg.jpeg?imageMogr/thumbnail/!200x200r/gravity/Center/crop/200x200/" alt="">
                        <p class="shijing_p">门面(1张)</p>
                    </div>
                    <div class="shijing">
                       <img src="https://fuss10.elemecdn.com/0/f6/e5273e3ae871dc57e23bf5c35417fjpeg.jpeg?imageMogr/thumbnail/!200x200r/gravity/Center/crop/200x200/" alt="">
                        <p class="shijing_p">门面(1张)</p>
                    </div>
                </div>
                 <div style=" border-top: .5rem /* 8/16 */ solid rgb(235, 235, 235);"></div>

                 <div class="sj_con5">
                     <p class="actives">商家信息</p>
                     <p class="p_style1">叫外卖？上饿了么！</p>
                     <div class="sj_info">
                         <span class="span_style2">品类</span>
                        <span>
                             <span v-for="(v3,i3) in v1.flavors" :key="i3+'h'">
                             <span class="span_style">
                                {{v3.name}}
                            </span>
                        </span>
                        </span>
                        
                     </div>
                      <div class="sj_info">
                         <span class="span_style2">商家电话</span>
                         <span class="span_style">{{v1.phone}}
                             <span class="glyphicon glyphicon-menu-right"></span>
                         </span>
                     </div>
                      <div class="sj_info">
                         <span class="span_style2">地址</span>
                         <p class="span_style"><span style="float:right">{{v1.address}}</span></p>
                     </div>
                      <div class="sj_info">
                         <span class="span_style2">营业时间</span>
                         <span class="span_style">{{v1.opening_hours[0].slice(0,5)}}-{{v1.opening_hours[0].slice(6)}}</span>
                     </div>

                 </div>
                </div>

                 <div style=" border-top: .5rem /* 8/16 */ solid rgb(235, 235, 235);"></div>
                 <div class="sj_con6">
                     <span class="span_style2">营业资质</span>
                    <span class="span_style"><span class="glyphicon glyphicon-menu-right"></span></span>
                 </div>
                 <div style=" border-top: .5rem /* 8/16 */ solid rgb(235, 235, 235);"></div>

                <div style="height:100px"></div>
            </div>
        </div>
    </div>

  </div>
    
</template>
<script>
   
import { Tab, TabItem,Swiper, SwiperItem,Sticky,} from 'vux'

    export default {
        components: {
            Tab,
            TabItem,
            Sticky,
            Swiper,
            SwiperItem,
        },
        data(){
            return {
                index:0,
                info:[],
                listInfos:[],
                // names:[],
             
                foodscore:[],
                tagsCount:[],
                pingjia:[],
                userSjInfo:[],
                ary:[],
                total:0,
                money:0
                // acts:[],
                // result:[]
                
            }
        },
        created() {
             $("#footer").hide();
            if(this.total<=0){
                $(".car").css("backgroundColor","#444")
                
            }else{
                 $(".car").css("backgroundColor","#3190e8")
            }
            console.log(this.$route.params.id);
            this.informmation();
            this.listInfo();
            this.userPj();
            this.userSj();
        },
        methods:{
             goBack(){
            this.$router.go(-1);
            $("#footer").show();
           
            },
            // 点击显示购物车导航
            shownav(){
                //   $("footer").show();
            },
             // 商家详情页面信息接口
            informmation(){
                  this.$http.get("/ele/restapi/shopping/v3/restaurants?latitude=24.54786&longitude=118.124509&offset=0&limit=20&extras[]=activities&extras[]=tags&extra_filters=home&order_by=0&rank_id=&terminal=h5")
                .then(function(resData){
                   var value=resData.body.items;
                //    console.log(value)
                   for(var i=0;i<value.length;i++){
                //     //    过滤图片信息
                        value[i].restaurant.image_path=this.filterSrc(value[i].restaurant.image_path)
                        if(value[i].restaurant.id==this.$route.params.id){
                            // value[i].restaurant.count=0;
                            // console.log(value[i].restaurant);
                            this.info.push(value[i].restaurant);
                        
                            

                //             // // console.log(this.info)
                //             // this.acts=value[i].restaurant.activities
                //             // console.log(this.acts)
                        }
                   }
              
                });
                
            },
            // 商家菜单左边列表页面信息接口
            listInfo(){
                this.$http.get(`/mainsite/shopping/v2/menu?restaurant_id=${this.$route.params.id}`)
                .then(function(resData){
                    // console.log(resData.body);
                   for(var i=0;i<resData.body.length;i++){
                        
                       if(resData.body[i].icon_url){
                        resData.body[i].icon_url=this.filterSrc(resData.body[i].icon_url)
                       };
                        for(var k=0;k<resData.body[i].foods.length;k++){
                             resData.body[i].foods[k].count=0;     
                            resData.body[i].foods[k].image_path=this.filterSrc(resData.body[i].foods[k].image_path)
                        }
                        // console.log(resData.body[i])
                        this.listInfos.push(resData.body[i])
                       
                   }
                //    console.log(resData.body);
                //    console.log(this.listInfos);
                })
            },
            

            // 评价信息的功能接口
            // ${this.$route.params.id}
        //   https://h5.ele.me/pizza/ugc/restaurants/E3077935664004890291/batch_comments?has_content=true&offset=0&limit=20
            userPj(){
                 this.$http.get(`/ele//pizza/ugc/restaurants/${this.$route.params.id}/batch_comments?has_content=false&offset=0&limit=20`)
                .then(function(resData){
                    // console.log(resData.body);
                    // 评论标签
                    this.tagsCount=resData.body.tags;
                    this.foodscore.push(resData.body.rating)

                    for(var i=0;i<resData.body.comments.length;i++){
                        if(resData.body.comments[i].order_images){
                        //  console.log( resData.body.comments[i].order_images[0].image_hash)
                         resData.body.comments[i].order_images[0].image_hash=this.filterSrc( resData.body.comments[i].order_images[0].image_hash)
                        //  console.log( resData.body[i].order_images[0].image_hash)
                        }  
                    }
                    this.pingjia=resData.body.comments;

                    //  console.log(resData.body);

                })

            },

            // 商家的功能接口
            // 5178e16a29f59da5ff3bbf2d03981542jpeg
            // https://h5.ele.me/restapi/shopping/v1/restaurants/E5695657363333065014/brand_story?come_from=app
            userSj(){
                this.$http.get(`/ele/restapi/shopping/v1/restaurants/${this.$route.params.id}/brand_story?come_from=app`)
                .then(function(resData){
                    // console.log(resData.body)
                    if(resData.body.brand_intros.length>0){
                         resData.body.brand_intros[0].image_hash=this.filterSrc( resData.body.brand_intros[0]. image_hash)
                    }
                    
                    // console.log(resData.body.brand_intros[0]. image_hash);
                    //   console.log(resData.body);
                   this.userSjInfo.push(resData.body);
                

                    // this.userSjInfo.push(resData.body);
                })
            },

            // 点击加号，显示减号
            add(index,s,el){        
                // console.log(index);
                // console.log(s);
                var allcount=0;
                var allprice=0;              
                console.log(this.listInfos[index].foods[s].specfoods[0].price)
                this.listInfos[index].foods[s].count++;
                for(var i=0;i<this.listInfos.length;i++){
                    for(var k=0;k<this.listInfos[i].foods.length;k++){
                        allcount+=this.listInfos[i].foods[k].count;
                        allprice+=this.listInfos[i].foods[k].count*this.listInfos[i].foods[k].specfoods[0].price.toFixed(2)
                    }
                }
                // console.log(allprice);
                this.total=allcount;
                this.money=allprice.toFixed(2);
              
                $(el.target).siblings().eq(0).css("display","inline-block");
                $(el.target).siblings().show();

                  if(this.total<=0){
                $(".car").css("backgroundColor","#444") 
                }else{
                    $(".car").css("backgroundColor","#3190e8")
                }
            },
            reduce(index,s,el){   
                // this.listInfos[index].foods[s].count--;
                this.total--;
                  if(this.total<=0){
                      this.total=0;
                       $(".car").css("backgroundColor","#444")
                    $(".red_count").hide();
                }else{
                    $(".car").css("backgroundColor","#3190e8")
                }
                this.listInfos[index].foods[s].count--;
                this.money=this.money-this.listInfos[index].foods[s].specfoods[0].price;
                this.money=(this.money).toFixed(2);
                console.log(this.money);
                if(this.listInfos[index].foods[s].count<=0){
                    $(el.target).hide();
                    $(el.target).siblings().eq(0).hide();
                    this.listInfos[index].foods[s].count=0;
                };
                
               if(this.money<=0){
                    this.money=0;
                }
                console.log(this.listInfos[index].foods[s].count)
              
                //  console.log(this.money);        
            },

            // 展示活动面板
            activeShow(){
                $(".activeMask").show();
                $(".activeFix").slideDown();
            },

            // 点击活动遮罩层 隐藏
            hideActiveMask(){
                $(".activeMask").hide();
                 $(".activeFix").slideUp();

            },
        
            // 过滤图片路径
            filterSrc(imgSrc){
                var str="";
                var s1=imgSrc.slice(0,1);
                var s1=imgSrc.slice(0,1);
                var s2=imgSrc.slice(1,3);
                var s3=imgSrc.slice(3);
                if(imgSrc.endsWith("jpeg")){
                    str="https://fuss10.elemecdn.com/"+s1+"/"+s2+"/"+s3+".jpeg";
                }else{
                    str="https://fuss10.elemecdn.com/"+s1+"/"+s2+"/"+s3+".png";
                }
               return str;

            }

        },
      
        mounted() {
               $(".con_dpj").hide();
               $("#dc").show(); 
               $(".a_tab").each(function(index,value){
               $(this).click(function(){
                    $(".con_dpj").eq(index).show();
                    $(".con_dpj").eq(index).siblings().hide();
                })
                 });  
        }

    };
   
     $(document).scroll(function(){            
        var h1=400;
        // console.log()
        $(".activeMask").css({
            width:"100%",
            height:$(document).height()
        })              
        if($(this).scrollTop()>=h1){
            $("#left_List").css({
                    position: "fixed",
                    top: "1.875rem",
                    left:0,
                    width:"20%",
                    zIndex:400 
            })
        }else{
                $("#left_List").css({
                position:"absolute",
                width:"100%",
                top:0,
                left:0               
            })   
        } ;
      
 
    })
     $(window).resize(function(){
           $(".activeMask").css({
            width:"100%",
            height:"100%"
        })  
           
        })
    

    
</script>
<style scoped>
    *{
        box-sizing: border-box;
    }
    body,html{
        width: 100%;
        height: 100%;
        position: relative;
        background-color: white;
        overflow-x: hidden;
    }
    p{
        margin: 0px;
        padding: 0px;

    }
    .active{
        color:red;
    }
    
     .contentB{
        background-color: white;
        overflow-x: hidden;

    }
    .info{
        width: 100%;
        height: 100%;
        /* background-color: black; */
        /* opacity: 0.5; */
        /* position: relative; */
    }
    #dc{
        widows: 100%;
    }

    #dc footer{
        position: fixed;
        bottom: 0px;
        width: 100%;
        height:2.1875rem /* 35/16 */;
        background-color: #444;
        /* opacity: 0.9; */
        z-index: 500;
    }
     #dc footer .footer_con1{
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: space-between;

     }
    #dc footer .footer_left{
        width: 70%;
        height: 100%;
        /* border: 1px solid red; */
        position: relative;
      
    }
    #dc footer .footer_left .car{
        width:1.875rem /* 30/16 */;
        height:1.875rem /* 30/16 */;
       box-shadow: 0 -.8vw .533333vw 0 rgba(0,0,0,.1);
        border-radius: 50%;
        border: .125rem /* 2/16 */ solid #555;
        position: absolute;
        top: -.625rem /* 10/16 */;
        left: .625rem /* 10/16 */;
        background-size: 100% 100%;
        background: url() 50% no-repeat;
        /* background-size: auto auto; */
        background-size: 6vw;
        /* background-color: #3190e8; */
         background-color:#444;
    }
     #dc footer .footer_left .total{
         color: white;
         position: absolute;
         left:3.125rem /* 50/16 */;
         top:10%;
     }
      #dc footer .footer_left .total .text{
          color:#888;
          font-size: .5rem /* 8/16 */;
      }
    #dc footer .footer_left .red_count{
        /* padding: .0625rem 1/16; */
        display: inline-block;
        width: .625rem /* 10/16 */;
       height: .625rem /* 10/16 */;
        background-color: rgb(246, 38, 38);
        text-align: center;
        line-height: .625rem /* 10/16 */;
        border-radius: 50%;
        color:white;
        position: absolute;
        right:-.3125rem /* 5/16 */;


    }
     #dc footer .footer_right{
        width: 30%;
        height: 100%;
        color:white;
        background-color: rgb(41, 236, 155);
        text-align: center;
        font-weight:600; 
        line-height: 2.1875rem /* 35/16 */;
      
    }
     .activeMask{
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.5;
        z-index: 1300;
        display: none;
    }
    .activeFix{ 
        position: fixed;
        bottom: 0;
        width: 100%;
        opacity: 1;
        z-index: 1400;
        background-color: white;
        display: none;
    }
     .fixtop .youhui_title{
        width:100%;
        color:#555;
        text-align: center;
        font-size: .75rem /* 12/16 */;
        font-weight: 600;
        line-height: 1.875rem /* 30/16 */;
        /* border: 1px solid salmon; */
        position: relative;  
    }
      .youhui_title span{
        position: absolute;
        right: .3125rem /* 5/16 */;
    }
     .youhui{
        height:9.375rem /* 150/16 */;
        position: relative;
        overflow-y: scroll;
        overflow-x:hidden;
      
    }
 
     .youhui .youhui_con{
         width: 100%;
         /* border: 1px solid black; */
         padding: .3125rem /* 5/16 */ .9375rem /* 15/16 */;
     }
     .youhui .youhui_con p{
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: .3125rem /* 5/16 */ 0;

     }
     .youhui .youhui_con p .span_text{
         color:white;
         background-color: rgb(250, 120, 142);
         padding: 0 .125rem /* 2/16 */;

     }


    

    header{
        width: 100%;
        height:4.375rem /* 70/16 */;
        /* border: 1px solid red; */
        background-image: url("");
        background-size: 100% 100%;
        position: relative;
        /* 10/16 */
    }
    header .bg_img img{
        width: 100%;
        height: 4.375rem /* 70/16 */;

    }
    header .left{
        position: absolute;
        color:white;
        z-index: 100;
        margin:.3125rem /* 5/16 */;
        font-size: .75rem /* 12/16 */;

    }
    .mask{
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: #333;
        opacity: 0.2;

    }
   
    header .img_box{
        width: 3.4375rem /* 55/16 */;
        height:3.4375rem /* 55/16 */;
        /* border: 1px solid red; */
        z-index: 100;
        position: absolute;
        left: calc(50% - 1.71875rem);
        bottom: -.9375rem /* 15/16 */;
        border-radius: .1875rem /* 3/16 */;
    }
    header .img_box img{
        width: 100%;
        height: 100%;
        border-radius: .1875rem /* 3/16 */;
    }
    .contentA{
        width: 100%;
        /* background-color: white; */
        margin-top: 1.5625rem /* 25/16 */;
    }
    .contentA .contentA_1{
        width: 80%;
        height:2.1875rem /* 35/16 */;
        /* border: 1px solid black; */
        margin: 0 auto;
    }
    .contentA .contentA_2{
        width: 90%;
        height:2.1875rem /* 35/16 */;
        /* border: 1px solid red; */
        margin: 0 auto;
        margin-top:.1875rem /* 3/16 */;
    }
    .contentA .contentA_1 .title_text{
        font-size:.875rem /* 14/16 */;
        font-weight: 600;
        color: #444;
    }
   
    .s1{
        font-size:.5rem /* 8/16 */;
        color:#666;
    }
    .contentA .contentA_2 .manjian{
        width: 100%;
        margin: 0px auto;
        /* border: 1px solid purple; */
        position: relative;

    }
    .contentA .contentA_2 .manjian .right{
        position: absolute;
        right:.3125rem /* 5/16 */;
        top:.15625rem /* 2.5/16 */;
        color:#888;
    }
    .contentA .contentA_2  .gonggao{
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height:1.25rem /* 20/16 */;
        color:#888;
    }




   
    /* 商家 */
    #sj .sj_con1 {
        width: 100%;
        padding: .3125rem /* 5/16 */;
        /* border:  1px solid red; */
    }
    #sj .sj_con1 img{
        width: 100%;
    }
    #sj .sj_con1 .miaosu{
        margin-top: .625rem /* 10/16 */;
        color:#444;
        font-weight: 600;
        margin-left: .3125rem /* 5/16 */;
       
    }
    #sj .sj_con1 .info{
    font-size:.55rem /* 8.8/16 */;
    color: #666;
    width: 100%;
    margin-left: .3125rem /* 5/16 */;
    overflow: hidden;
    height: 1.8rem;
    /* white-space: nowrap; */
    text-overflow: ellipsis;   
    }
    #sj .sj_con1 .chakan{
        text-align: center;
        margin: .5rem ;
        font-size:.55rem /* 8.8/16 */;
        color: #555;
        margin-bottom: .1875rem /* 3/16 */;
    }

    /* 配送信息 */
     #sj .sj_con1,#sj .sj_con2,
      #sj .sj_con3,#sj .sj_con4,
      {
        width: 100%;
        padding:.3125rem /* 5/16 */;
        /* border:  1px solid red; */
    }
    #sj .sj_con2 .peisong{
    color:#444;
    font-weight: 600;
    margin: .3125rem ;
    margin-left:.1875rem /* 3/16 */;
    }
    #sj .p_style{
    font-size:.5rem /* 8/16 */;
    color: #555;
    margin: .3125rem /* 5/16 */ ;
    }
    #sj .sj_con2 .peisongInfo{
    font-size:.55rem /* 8.8/16 */;
    color: #666;
     margin-left: .3125rem /* 5/16 */;
    margin-bottom: .1875rem /* 3/16 */;
    /* padding: 0 .3125rem 5/16; */

    }
    #sj .actives{
        color:#444;
        font-weight: 600;
        margin: .3125rem ;
        margin-left:.1875rem /* 3/16 */;
    }
    #sj .sj_con3 p span:nth-child(1){
        background-color: rgb(253, 121, 143);
        padding: 0 .125rem /* 2/16 */;
        color: white;
        font-size: .5625rem /* 9/16 */;

    }
    #sj .sj_con3 p span:nth-child(2){
        margin-left:.1875rem /* 3/16 */;
        color: #666;
    }
    #sj .sj_con3 p:last-child{
        margin-bottom:.5rem /* 8/16 */;
    }
     #sj .sj_con4 .shijing{
        width: 25%;
        display: inline-block;
        position: relative;
        margin: .1875rem /* 3/16 */;
        margin-top: 0px;
     }
    #sj .sj_con4 img{
        width: 100%;   
    }
    #sj .sj_con4 .shijing .shijing_p{
        width: 100%;
        position: absolute;
        background-color: #333;
        color:white;
        font-size: .53125rem /* 8.5/16 */;
        bottom: 0px;
        opacity: 0.8;
        text-align: center;
    }
    #sj .sj_con5 .p_style1{
        color: #666;
        font-size: .53125rem /* 8.5/16 */;
        margin-left: .15625rem /* 2.5/16 */;
        margin-bottom: .3125rem /* 5/16 */;

    }
      #sj .sj_con5{
        width: 100%;
        padding-left: .5rem /* 8/16 */;
        /* border:  1px solid red; */
    }

    #sj .sj_con5 .sj_info{
        width: 100%;
        padding: 0 .3125rem /* 5/16 */;
        height: 1.875rem /* 30/16 */;
        line-height: 1.875rem /* 30/16 */;
        /* border: 1px solid black; */
        display: flex;
        justify-content: space-between;
        border-top: 1px solid rgb(235, 235, 235);
    }
     #sj .sj_con5 .sj_info p{
         width: 80%;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
     }
    #sj  .span_style{
        color:#666;
        font-size: .53125rem /* 8.5/16 */;
        

    }
    #sj  .span_style2{
        color:#444;
        font-weight: 600;
    }
    #sj .sj_con6{
        width: 100%;
        /* border:  1px solid red; */
        padding:0 .5rem /* 8/16 */;
        height: 1.875rem /* 30/16 */;
        line-height: 1.875rem /* 30/16 */;
        display: flex;
        justify-content: space-between;
    }
   
    


    /* 评价 */
    #pj .pj_pf{
        width: 100%;
        /* background-color: #999; */
        /* border: 1px solid; */
    }
    #pj .pj_pf .con1{
        width: 90%;
        height: 3.125rem /* 50/16 */;
        margin:.3125rem /* 5/16 */ auto;
        /* border: 1px solid; */

    }
     #pj .pj_pf ul{
        width: 100%;
        height: 100%;
    }
    #pj .pj_pf .con1 li{
        width: 20%;
        text-align: center;
        height:2.5rem /* 40/16 */;
        /* border: 1px solid gray; */
        float: left;
    }
    #pj .pj_pf .con1 li:last-child{
        border-left: .0625rem /* 1/16 */ solid rgb(243, 241, 241);
    }
    #pj .pj_pf .con1 li p{
        margin: 0px;
        padding: 0px;
    }
    #pj .pj_pf .con1 .p_text{
        color: orangered;
        display: inline-block;
        font-size: 1.375rem /* 22/16 */;
    }
    #pj .pj_pf .con1 .p_text1{
        color:#666;
        font-size: .53125rem /* 8.5/16 */;
    }
    .icon_span{
        color:gold;
        font-size:.4375rem /* 7/16 */;

    }
     #pj .pj_pf .con1 .p_text2{
         color:#666;
         font-size: 1rem;
     }
     .div_mar{
         margin-top: .3125rem /* 5/16 */;
     }
    #pj section{
         width: 100%;
         padding:0  .5rem /* 8/16 */;
         /* border: 1px solid salmon; */
        
    }
     #pj  section .con2{
        width: 100%;
    border-bottom: .0625rem  solid rgb(216, 216, 216);
     background-color: white;
     padding: .5rem /* 8/16 */;
    }
    #pj section .con2 li{
        display: inline-block;
    }
     #pj section .con2 .li_style{
        padding:.15625rem /* 2.5/16 */ .3125rem /* 5/16 */;
        border-radius: .125rem /* 2/16 */;
        font-size: .5625rem /* 9/16 */;
        margin:.15625rem /* 2.5/16 */ ;
        background-color: rgb(218, 236, 248);
         color:rgb(112, 112, 112);
    }
    #pj  section .con2 .oneli{
       background-color: rgb(11, 153, 248);
       color:white;
    }
  
     #pj  section .con2 .tagColor{
        background-color: rgb(238, 237, 237);
        color:#999;

    }

     #pj  section .con2 .dagou{
        font-size: .5rem /* 8/16 */;
        font-weight: bold;
        border-radius: 50%;
        padding: 0 .15625rem /* 2.5/16 */;
        color:white;
        background-color: greenyellow;
    }
     #pj  section .con3{
         width: 100%;
         /* height: 200px; */
         margin-top: .3125rem /* 5/16 */;
         display: flex;
         justify-content: space-between;
         /* border: 1px solid skyblue; */
         border-bottom: .0625rem /* 1/16 */ solid  rgb(216, 216, 216);
        
         
     }
     #pj  section .con3 .pj_photoBox{
         width: 15%;
     }
     #pj  section .con3 .pj_photoBox div{
        background-image: url("../../../static/icon/jinglin.png");
         /* height: 30px; */
         /* border:1px solid red; */
        background-repeat: no-repeat;
        background-size: 100% 600%;
        width: 1.875rem /* 30/16 */;
       height: 1.875rem /* 30/16 */;
        border-radius: 50%;
      

     }
      #pj  section .con3 .pj_photoBox img{
          width: 100%;
      }
     #pj  section .con3 .pj_con{
         width: 85%;
        padding: 0 .3125rem /* 5/16 */;
         /* border: 1px solid black; */
     }
   
      #pj  section .con3 .pj_con .username{
          width: 100%;
          height: 1.25rem /* 20/16 */;
          line-height: 1.25rem /* 20/16 */;
          /* border: 1px solid red; */
          display: flex;
          justify-content: space-between;
           padding:0 .3125rem /* 5/16 */;
      }
      #pj .date{
          font-size:.53125rem /* 8.5/16 */;
          color: #999;
      }
    #pj  section .con3 .pj_con .pj_img{
        width: 100%;
        height:6.25rem /* 100/16 */;
        /* border: 1px solid teal; */
    }
    #pj  section .con3 .pj_con .pj_img img{
        width: 50%;
    }
    #pj  section .con3 .pj_con .answer{
        margin: .3125rem /* 5/16 *//* 3/16 */ 0;
        background-color: rgb(236, 235, 235);
        border-radius: .1875rem /* 3/16 */;
        font-size: .53125rem /* 8.5/16 */;

    }
        #pj  section .con3 .pj_con .dianzan{
            margin: .3125rem /* 5/16 */;
            height: 1.25rem /* 20/16 */;
            line-height:1.25rem /* 20/16 */;
        }
        #pj  section .con3 .pj_con .dianzan .span_zan{
            background-color: rgb(218, 236, 248);font-size: .5rem /* 8/16 */;
            padding: .1875rem /* 3/16 */;
            color:#999;
        }

    
    #dc .dc_con2{
        width: 100%;
        /* border: 1px solid gold; */
        height: 100%;
        margin-top:.625rem /* 10/16 */;
        background-color: white;
        display: flex;
        justify-content: space-around;
        /* border:  1px solid salmon; */
    }
     #dc .dc_con2 .libox{
         width: 20%;
         position: relative;
          margin-bottom: 6.25rem /* 100/16 */;
        
     }
    
    #dc .dc_con2 .dc_con2_left{
        width: 100%;
        height:25rem /* 400/16 */;
        overflow-y: scroll;
        overflow-x:hidden;
        /* position: absolute;
        left:0px;
        top: 0px; */
        /* border: 1px solid black; */
        background-color: rgb(241, 241, 241);
    }
     #dc .dc_con2 .dc_con2_left li img{
         width:.5rem /* 8/16 */;
     }
      #dc .dc_con2 .dc_con2_right{
        width: 80%;
        background-color: white;
    }
    .s3{
        color: #777;
        font-size:.46875rem /* 7.5/16 */;
    }
   
    #dc .dc_con2 .dc_con2_left  li a{
        width: 100%;
        /* height: 1.875rem 30/16; */
       padding:.625rem /* 10/16 */ 0;
        /* line-height:  1.875rem; */
        text-align: center;
        /* border: 1px solid red; */
        color: #555;
        font-size: .5375rem /* 8.6/16 */;
        /* background-color: rgba(214, 213, 213, 0.6); */
       
    }
     .active{
         color:orangered;
    }

     #dc .dc_con2 .dc_con2_1{
         width: 100%;
               
     }
      #dc .dc_con2 .dc_con2_1 .list_title{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 .1875rem /* 3/16 */;
        line-height: 1.5625rem;
        margin-left: .3125rem 



      }
    
     #dc .dc_con2 .dc_con2_11{
         width: 100%;
         /* border: 1px solid red; */
         height:4.375rem /* 70/16 */;
         margin:.3125rem 0px;
         padding:0 .3125rem;
         margin-bottom: .625rem /* 10/16 */;
     }
     
     #dc .dc_con2 .dc_con2_11 .imgleft{
         width: 35%;
         height: 100%;
          float: left;
         /* background-color: gold; */

     }
      #dc .dc_con2 .dc_con2_11 .imgleft img{
          width: 100%;
          border-radius: .125rem /* 2/16 */;
         
      }
    #dc .dc_con2 .dc_con2_11 .contright{
        width: 65%;
        height: 100%;
        float: left;
        /* background-color: greenyellow; */
        padding:0 .375rem ;
    }
     #dc .dc_con2 .dc_con2_11 .contright p{
        width: 95%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;   
     }
     #dc .dc_con2 .dc_con2_11 .contright .right{
         position: absolute;
         right: 0px;
         /* color:rgb(30, 164, 253); */
         /* top:.15625rem 2.5/16; */
        
     }

   
   
    #dc .dc_title{
        width: 100%;
        height: 1.875rem /* 30/16 */;
        line-height: 1.875rem /* 30/16 */;
        font-size: .6875rem /* 11/16 */;
        font-weight: 600;
        margin-left:10px;
    }
      #dc .dc_con1{
          width: 100%;
          height: 7.8125rem /* 125/16 */;
          /* border: 1px solid red; */
          overflow-y: hidden;
          overflow-x:scroll;
           
      }
     #dc .dc_con1 .cd_con1_1{
         width: 100%;
         height: 100%;   
     }
      #dc .dc_con1 .cd_con1_1 ul{
         width: 200%;
         height: 100%;
     }
     #dc .dc_con1 .cd_con1_1 li{
         /* width:33.33%; */
         width: 5.5rem;
         height: 100%;
         /* border: 1px solid black; */
         float: left;
         padding: 0 .3125rem /* 5/16 */;
     }
     #dc .dc_con1 .cd_con1_1 li img{
         width: 100%;
     }

     #dc .dc_con1 .cd_con1_1 li .p_text1{
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;    
     }
     #dc .dc_con1 .cd_con1_1 li .p_text3{
         position: relative;
     }
     #dc .dc_con1 .cd_con1_1 li .p_text3 .right{
        font-size: .875rem /* 14/16 */;
        position: absolute;
        right: .15625rem /* 2.5/16 */;
        top:.15625rem /* 2.5/16 */;
     }
     .jia,.jian{
        display: inline-block;
        width: .9375rem /* 15/16 */;
        height:.9375rem ;
        line-height: .9375rem /* 15/16 */;
        font-size: .75rem /* 12/16 */;
        text-align: center;
        background-color: rgb(30, 164, 253);
        border-radius: 50%;
        color: white;
        font-size: .875rem /* 14/16 */;
    

    }
    .jian,.count{
        display: none;
    }
   

    /* 评价 */

   



    
</style>